<template>
  <div class="process-rawcloth">
    
    <div class="plan" style="border:1px dotted #409EFF;" >
      <div class="title" style="color:#409EFF;" >成品列表</div>
      <product-list :infoList="infoList" ref="productListRef" @add-pkg-success="refreshData" @complete-pkg-success="refreshData" ></product-list>
    </div>
    <div class="process" style="border:1px dotted #409EFF;" >
      <div class="title" style="color:#409EFF;" >包装列表</div>
      <pkg-list  :infoList="infoList" ref="pkgListRef" @del-pkg-success="refreshData" @confirm-pkg-success="refreshData"  ></pkg-list>
    </div>
  </div>
</template>

<script setup >
import { ref, reactive, onMounted, computed, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { tip, get, post, put, del, ddo, elConfirm } from "@/common";




const tableMaxHeight = computed(() => ddo.homeElCardBodyHeight - 200);

//获取基础信息
const infoList = ref([]);
const getInfoList = () => {
  get("/plan/manager/info").then((result) => {
    infoList.value = result.data;
  });
};
getInfoList();


//产品列表
import ProductList from './product-list.vue'
const productListRef = ref();

//分组数据
import PkgList from './pkg-list.vue';
const pkgListRef = ref();

const refreshData = ()=>{
  productListRef.value.refresh();
  pkgListRef.value.refresh();
}


</script>

<style scoped>
.x {
}
.process-rawcloth {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.process-rawcloth > .plan , .process-rawcloth > .process{
  width: 48%;
  flex: none;
  padding:0px 10px 10px;
  border:1px dotted #b1b3b8;
  border-radius: 5px;
}

.process-rawcloth > .plan > .title,.process-rawcloth > .process > .title{
  padding:7px 0px 5px;border-bottom:1px dotted #DCDFE6;
  font-size:13px;font-weight: bold;
  color:#606266;
  
}

.slide-fade-enter-active {
  transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-leave-active {
  /* transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0); */
  transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateY(300px);
  opacity: 0;
}
</style>